iT邦幫忙

2022 iThome 鐵人賽

DAY 24
0
Mobile Development

Flutter Didilong系列 第 24

D-24 Bloc builder / builderWhen | Flutter筆記

  • 分享至 

  • xImage
  •  

承接 D-23 Bloc 計數器實作 | Flutter筆記
補充Bloc中的介紹

CounterCubit

繼承 Bloc中 Cubit<int>
沒有事件概念,需透過emit更新狀態

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
}

BlocBuilder

提供CounterCubit給 Textwidget 使用
此處無法通過BlocProvider取得以及BuildContext

BlocBuilder<CounterCubit, int>(
        builder: (context, state) => Center(
          child: Text(
            state.toString(),
          ),
        ),
),

buildWhen bool Function(int, int)?

能去控制何時要更新BlocBuilder
buildWhen 會給予 (前次State 當前State)
在裡面寫下條件決定是否更新畫面
if(前次==當前) return false // 代表數字沒變就不需要更新(多此一舉)
return true //也就會更新畫面

  • buildWhen沒特別設定時,預設為true (每次觸發都會更新)
BlocBuilder<CounterCubit, int>(
        buildWhen: (previous, current) {
          if (previous == current) {
            return false;
          }
          return true;
        },
        builder: (context, state) {
          print('builder');
          return Center(
            child: Text(
              state.toString(),
            ),
          );
        },
      ),

結論

完成到這裡,你會發現很多事情可以去細調
程式專案規模逐漸變大
也會對很多操作變得特別嚴格


上一篇
D-23 Bloc 計數器實作 | Flutter筆記
下一篇
D-25 Bloc Selector | Flutter筆記
系列文
Flutter Didilong30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言